<template>
	<view class="container">
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#000"> {{title}} </tn-navbar>

		<!-- tabs页眉 -->
		<tn-switch-tab v-model="curState" :tabs="tabs" @change="tabsChange"></tn-switch-tab>

		<!-- 垂直滚动区域 -->
		<scroll-view scroll-y="true" class="scroll-Y">
			<view v-for="(item,index) in tabs" :key="index" style="height: 300px;">
				{{item}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '滚动页面',
				curState: 0,
				tabs: ['待付款', '待发货', '待收货', '已收货', '全部']
			}
		},
		methods: {
			tabsChange() {
				console.log('tabsChange');
			}
		}
	}
</script>

<style lang="scss">
	html,
	body {
		overflow: hidden;
	}

	.container {
		width: 100%;
		color: $uni-text-color;
		background-color: $uni-bg-color-grey;
	}
</style>